<template>
  <!-- 进度管理 -->
  <div>
    <div class="tabsClass">
      <div class="treesty">
        <blockComponents :msg="'项目阶段'"></blockComponents>

        <el-tree
          :data="dataTree.data"
          node-key="projectStageId"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <template #default="{ data }">
            <span class="custom-tree-node">
              <span>{{ data.stageName }}</span>
              <!-- <span>
                <span class="projectPeople" @click="append(data)">
                  进场人员
                </span>
              </span> -->
            </span>
          </template>
        </el-tree>
      </div>
      <div style="flex: 1">
        <div class="flex_project">
          <!-- <div class="info">项目基本信息</div>
          <div class="hint">
            <svg-icon icon-class="prompt-icon" />
            温馨提示:该项目与以往项目<span class="color_sty"
              >成都养老系统、</span
            ><span class="color_sty">成都写字楼项目</span
            >类似,可参照以往项目进度计划~
          </div> -->
        </div>
        <div class="title_sty">
          <div class="big_box_flex">
            <p class="text_height">项目名称</p>
            <p class="p_sty">{{ state.data.projectName }}</p>
          </div>
          <div class="big_box_flex">
            <p class="text_height">项目发起部门</p>
            <p class="p_sty">{{ state.data.responsibleDepartmentName }}</p>
          </div>
          <div class="big_box_flex">
            <p class="text_height">项目时间</p>
            <p class="p_sty">
              {{ state.data.predictStartTime }}至{{ state.data.predictEndTime }}
            </p>
          </div>
        </div>
        <div class="btn_sty">
          <el-tabs
            v-model="state.btnActiveName"
            type="card"
            class="demo-tabs"
            @tab-change="tabHandleClick"
          >
            <el-tab-pane label="表格形式" name="0"></el-tab-pane>
            <el-tab-pane label="甘特图" name="1"></el-tab-pane>
          </el-tabs>

          <div>
            <el-button v-show="isShow" @click="upAnddownHandler(-1)"
              >上移</el-button
            >
            <el-button v-show="isShow" @click="upAnddownHandler(1)"
              >下移</el-button
            >
            <el-button v-show="isShow" @click="addHandler"
              ><svg-icon icon-class="project-add-icon" />新增</el-button
            >
            <el-button v-show="isShow" class="look" @click="updateHandler"
              >编辑</el-button
            >
            <el-button v-show="isShow" class="delete" @click="deleteHandler"
              >删除</el-button
            >
            <el-button v-show="isShow" 
              @click="onExport(getSearch())"

            >导出</el-button>
            <el-button v-show="isShow">打印</el-button>
          </div>
        </div>
        <div class="d-flex">
          <div class="table_sty">
            <tableIndex
              :tableData="state.tableData"
              :tableHead="state.tableHead"
              :isIndex="true"
              :height="500"
              :page="state.page"
              :not-search="true"
              @selectChange="selectChange"
              @searchList="searchList"
              @page-change="pageChange"
            >
              <template #operate> </template>
            </tableIndex>
          </div>
          <div class="gantt_sty" v-show="state.btnActiveName == 1">
            <!-- <GanttChart
              v-if="state.dateList"
              :ganttList="state.dateList"
              ref="ganttee"
            /> -->
          </div>
        </div>
      </div>
      <!-- <planDialog ref="plan"></planDialog> -->
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeMount, watch, nextTick } from 'vue'
import mapDialog from '@/views/constructionProjectManage/projectmanagement/components/mapDialog.vue'
import blockComponents from '@/components/block_components/index.vue'
import { GetDateDiff } from '@/common/utils/GlobalUtils'
import { deriveHandelFnc } from "@/hooks/downCommon";

// import GanttChart from './components/gantt_chart.vue'
import { useRoute, useRouter } from 'vue-router'
import { projectTask } from '@/api/project.js'
import tableIndex from '@/components/table/index.vue'
import '@/views/constructionProjectManage/static/button.scss'
// import planDialog from './components/w_planDialog.vue'
import {
  ElTabs,
  ElTree,
  ElTabPane,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElMessageBox,
  ElButton,
  ElTableColumn
} from 'element-plus'
const projectPlan = ref(null)
const props = defineProps({
  isShow: {
    type: Boolean,
    default: true
  },
  projectId: {
    type: String,
    default: '1'
  }
})
const state = reactive({
  tableList: [],
  projectStageId: '',
  data: {
    projectName: '',
    predictStartTime: '',
    predictEndTime: '',
    responsibleDepartmentName: ''
  },
  dateList: [],
  btnActiveName: '0',
  ganttList: [{}],
  tableData: [],
  tableHead: [
    {
      prop: 'taskName',
      label: '任务名称',

      style: {
        color: 'red',
        rgb: (252, 112, 24)
      }
    },
    {
      prop: 'taskCode',
      label: '任务代码'
    },
    {
      prop: 'date',
      label: '关注',
      isSvg: ['gz_true', 'gz_false']
    },
    {
      prop: 'taskContent',
      label: '工作细项'
    },
    {
      prop: 'status',
      label: '作业状态',
      formatter: (row) => {
        let str = ''
        // -1未完成0进行中1完成
        switch (row.status) {
          case -1:
            str = '未完成'
            break
          case 0:
            str = '进行中'
            break
          case 1:
            str = '完成'
            break

          default:
            break
        }
        return str
      }
    },
    {
      prop: 'planStartTime',
      label: '计划开始时间'
    },
    {
      prop: 'planEndTime',
      label: '计划完成时间'
    },
    {
      prop: 'workPeriod',
      label: '工期'
    },
    {
      prop: 'problemRemark',
      label: '存在的问题及困难'
    },
    {
      prop: 'responsibleUserName',
      label: '责任人'
    },
    {
      prop: 'responsibleDepartmentName',
      label: '责任部门'
    },
    {
      prop: 'delayStatus',
      label: '是否超时',
      formatter: (row) => {
        return row.date == '1' ? '超时' : '未超时'
      }

      // 1超时 0 未超时
    },
    {
      prop: 'realStartTime',
      label: '实际开始时间'
    },
    {
      prop: 'realEndTime',
      label: '实际完成时间'
    }
  ],
  page: {
    page: 1,
    pageSize: 10,
    total: 0
  }
})


const getSearch = () => {
  return {
    projectStageId :state.projectStageId,
    projectId :props.projectId,
  }
}
const exportConfig = reactive({
	fileName: "项目任务",
	apiPath: "taskExport",
  form: {
	},
});
const { onExport } = deriveHandelFnc(exportConfig);


const defaultProps = {
  children: 'children',
  label: 'label'
}
let dataTree = reactive([])
const ganttee = ref(null)
const plan = ref(null)
const handleNodeClick = (data) => {
  state.projectStageId = data.projectStageId
  getPageList({
    projectId: props.projectId,
    projectStageId: data.projectStageId
  })
}
//获取表格数据
const getPageList = (e) => {
  let obj = {
    pageNum: state.page.page,
    pageSize: state.page.pageSize,
    param: {
      projectId: e.projectId,
      projectStageId: e.projectStageId
    }
  }
  projectTask.getProjectTaskPage(obj).then((res) => {
    if (res.code == 200) {
      console.log(res.data)
      state.tableData = res.data.content
      state.page.total = res.data.totalSize
      state.dateList = res.data.content.map((v) => {
        const obj = {
          // taskName: state.taskNamev,
          text: v.taskName,
          // nodeName: v.actionResult,
          duration: GetDateDiff(v.realStartTime, v.realEndTime),
          realStartTime: v.realStartTime,
          realEndTime: v.realEndTime,
          start_date: new Date(v.realStartTime)
        }
        return obj
      })
      nextTick(() => {
        ganttee.value.clearHandler()
        ganttee.value.init()
      })
    }
  })
}
const tabHandleClick = (data) => {
  console.log(state.btnActiveName)
  switch (state.btnActiveName) {
    case '0':
      break
    case '1':
      break
  }
}
const pageChange = (e) => {
  state.page.page = e.page
  state.page.pageSize = e.limit

  getPageList({
    projectId: props.projectId,
    projectStageId: state.projectStageId
  })
}
const getListPage = () => {
  projectTask.getStageDetail(props.projectId || '').then((res) => {
    if (res.code == 200) {
      Object.assign(dataTree, {
        data: res.data.stageVo.stages
      })
      state.data = res.data
    }
  })
}
// const lookItemHandler = (row) => {
//   alert('跳转发起会议页面')
// }
//获取列表
const getProjectList = () => {
  getListPage()
}
//上移 下移
const upAnddownHandler = (val) => {
  if (state.tableList.length == 0) {
    ElMessage.warning('请先选择需要移动的数据')
    return
  } else {
    let obj = {
      projectTaskId: state.tableList[0].projectTaskId,
      oldTaskOrder: state.tableList[0].oldTaskOrder,
      projectStageId: state.projectStageId,
      orderNum: 1,
      updateOrderType: val
    }
    projectTask.updateTaskOrder(obj).then((res) => {
      getPageList({
        projectId: props.projectId,
        projectStageId: state.projectStageId
      })
    })
  }
}
//新增
const addHandler = () => {
  //   append(state.data)
  plan.value.state.centerDialogVisible = true
  plan.value.state.type = 0
  plan.value.state.projectId = props.projectId || ''
  plan.value.state.projectStageId = state.projectStageId
}
//编辑
const updateHandler = () => {
  if (state.tableList.length == 0) {
    ElMessage.warning('请先选择需要编辑的数据')
    return
  } else {
    // state.tableList = val

    plan.value.state.type = 1
    plan.value.state.projectId = props.projectId || ''
    plan.value.state.projectStageId = state.projectStageId

    for (let key in plan.value.formInline) {
      plan.value.formInline[key] = state.tableList[0][key]
    }
    plan.value.state.centerDialogVisible = true
    console.log(plan.value.formInline)
  }
}
//表格选中内容
const selectChange = (val) => {
  console.log(val)
  state.tableList = val
}
//删除
const deleteHandler = () => {
  if (state.tableList.length == 0) {
    ElMessage.warning('请先选择需要删除的数据')
    return
  } else {
    ElMessageBox.confirm('确认删除吗?', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        projectTask.removeTask(state.tableList[0].projectTaskId).then((res) => {
          if (res.code == '200') {
            ElMessage.success('删除成功')
            getPageList({
              projectStageId: state.projectStageId,
              projectId: props.projectId
            })
          }
        })
      })
      .catch(() => {})
  }
}

let router = useRouter()
const append = (data) => {
  router.push({
    path: '/constructionProjectManage/preliminaryProject/components/approachPeople',
    query: {
      projectId: props.projectId,
      projectStageId: data.projectStageId
    }
  })
}
onBeforeMount(() => {
  getProjectList()
})
onMounted(() => {
  //   getProjectList()
})
</script>
<style lang="scss" scoped>
.tabsClass {
  display: flex;
  overflow-x: scroll;
    .treesty {
    width: 15%;
    margin-right: 34px;
  }
}

.oneline {
  .el-form-item {
    width: 50%;
  }
}
.flex_project {
  display: flex;
  align-items: center;
  .info {
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #7d7d9a;
    line-height: 24px;
    margin-right: 10px;
  }
  .hint {
    // width: 582px;
    padding-left: 10px;
    padding-right: 10px;
    height: 34px;
    border-radius: 17px;
    line-height: 34px;
    border: 1px solid #d4ae85;
    text-align: center;
  }
}
.color_sty {
  color: #ff7b50;
  cursor: pointer;
}
.title_sty {
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  .big_box_flex {
    display: flex;
    .text_height {
      line-height: 40px;
    }
    .p_sty {
      margin-left: 20px;
      width: 300px;
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
      background: #f7f7fa;
      border-radius: 4px;
    }
  }
}
.btn_sty {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .el-button {
    margin-left: 20px;
  }
}
.projectPeople {
  color: #fff;
  cursor: pointer;

  text-align: center;
  font-size: 12px;
  height: 20px;

  line-height: 20px;
  margin-left: 20px;
  background-color: #d4ae85;
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
.gantt_sty {
  height: 500px;
  margin-top: 50px;

  overflow-y: scroll;
}
.table_sty {
  min-width: 1300px;
}
</style>
